<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/static/echars/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="form-group" style="width: 55%;height: 500px;float:left;">
    <div id="main" style="width: 100%;height: 100%;"></div>
</div>
<div class="pull-right" style="width: 40%">
    <div class="panel panel-default">
        <div class="panel-heading text-center">新闻/活动公告</div>
        <div class="panel-body">
            <div class="aaaa">
                <div id="con"></div>
            </div>
        </div>
    </div>
    <div class="">
        <img src="${pageContext.request.contextPath}/home/img/boy.gif">
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-center" id="myModalLabel">新闻/活动详情</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <span class="input-group-addon">新闻公告标题</span>
                    <input type="text" class="form-control" value="震惊一男子静" disabled="disabled"/>
                </div>
                <div style="height: 10px;">

                </div>
                <textarea class="form-control" rows="20" disabled="disabled">光天化日之下，一男子竟如此</textarea>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#con").empty();
    let news=${news};
    let content = "";
    for (let i = 0; i < news.length; i++) {
        content += "<div class='row'><input hidden value='" + i + "'><a href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\">"+news[i].title+"</a><span class=\"pull-right\">"+news[i].createdTime+"</span></div>\n"
    }
    $("#con").html(content);

    $("#con").on("click","a",function () {
        let newsIndex = $(this).prev().val();
        console.log($("#myModal :input")[1].value);
        $("#myModal :input")[1].value = this.innerText;
        $("#myModal :input")[2].value = news[newsIndex].content;
    })
    let user =${umap};
    // 基于准备好的dom，初始化echarts实例
    /**
     * 统计图
     * user表
     * 会员增长趋势统计（id【字段名】，createdTime【字段名】）
     * */
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '会员增长趋势统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'会员统计',
            type: 'line',
            data: [user[1],user[2],user[3],user[4],user[5],user[6],user[7],user[8],user[8],user[10],user[11],user[12]]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>